﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <style>
        .navbar {
            background-color: #6ea1ce;
            border-bottom-color: #6ea1ce;
        }

        .navbar-inverse .navbar-brand {
            color: #e8edf1;
        }

        .navbar-inverse .navbar-nav > li > a {
            color: #e8edf1;
        }

        .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
            background-color: #6ea1ce;
            color: #e8edf1;
        }
        .navbar-nav > li {
            float: left;
            font-weight: bold;
        }

        .ui-autocomplete { z-index:2000 !important; }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            display: inline-table;
        }
    </style>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Cinema Maestro", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" style="cursor: pointer;" data-toggle="dropdown">
                            Program
                            <span class="fa fa-caret-down"></span>
                        </a>
                        <ul class="dropdown-menu">
                            @{
                                var businessUoW = CinemaMaestro.Common.IocContainer.Resolver.Get<CinemaMaestro.BusinessLayer.BusinessObjectFactory>();
                                var list = businessUoW.Cinemas.Read().ToList();

                                List<CinemaMaestro.WebApplication.Models.CinemaViewModels> models = new List<CinemaMaestro.WebApplication.Models.CinemaViewModels>();

                                foreach (var model in list)
                                {
                                    CinemaMaestro.WebApplication.Models.CinemaViewModels cinema = model;
                                    models.Add(cinema);
                                }

                                foreach (var cinema in models)
                                {
                                    <li>@Html.ActionLink(cinema.Name, "Index", "Cinema", new { id= cinema.Id }, null)</li>
                                }
                            }
                        </ul>
                    </li>
                </ul>
                <!--@Html.Partial("_LoginPartial") -->
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        @using (Html.BeginForm("About", "Home", new { Id = 0 }, FormMethod.Post, new { @class = "navbar-form", @id = "searchForm", role = "search" }))
                        {
                            <div class="input-group">
                                @Html.TextBox("movieName", "", new { @class = "form-control", placeholder = "Search movie..." })
                                <div class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                </div>
                            </div>
                        }
                        <input type="hidden" id="movieId" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <link href="~/Scripts/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.ui.autocomplete.js" type="text/javascript"></script> 
    <script>
        $(function () {
            $("#movieName").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Search/Index",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (result) {
                                return {
                                    Id: result.Id,
                                    Title: result.Title,
                                    Image: result.Image
                                }
                            }));
                        }
                    });
                },
                focus: function (event, ui) {
                    $(this).val(ui.item.Title);
                    return false;
                },
                select: function (event, ui) {
                    $(this).val(ui.item.Title);
                    $('input:hidden[id="movieId"]').val(ui.item.Id);
                    return false;
                }
            }).data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<p><img style='height:50px;width:50px;' src='" + item.Image + "' />" + item.Title+"</p>")
                    .appendTo(ul);
            };
        });
        
        $('#searchForm').submit(function() {
            $form = $(this); 
            var movieId= $("#movieId").val();
            $form.prop("action", "/Home/About/" + movieId);
        });
    </script>
</body>
</html>
